@mixin flexColumnCenter {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

@mixin flexRowCenter {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

@mixin coverColorMask($rgba) {
    position: relative;

    &:after {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        background-color: $rgba;
        width: 100%;
        height: 100%;
    }
}

@mixin coverImageMask($rgbaColor,$imgUrl,$imgSize) {
    position: relative;

    &:after {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 100%;
        height: 100%;
        background: $rgbaColor no-repeat center 100% 100%, url($imgUrl) no-repeat center $imgSize $imgSize;
    }
}

@mixin flexCenter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


@mixin subComponentWrapper {
    width: 100%;
}

@mixin subComponentContainer {
    width: 100%;
    height: 100%;
}

@mixin singleLineText {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@mixin multiLineText($lineNum) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $lineNum;
}

@mixin CoverButtonWithImg($width, $height) {
    @include flexCenter;
    background: none;
    line-height: $height;
    overflow: visible;
    border-style: none;
    padding: 0;
    img {
        width: $width;
        height: $height;
    }
    &::after {
        border-style: none;
    }
}

@mixin FillButtonWithBgColor($color) {
    background-color: $color;
    border-style: none;
    padding: 0;
    &::after {
        border-style: none;
    }
}

$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-med-hea: 550;
$font-weight-light-heavy: 575;
$font-weight-heavy: 600;
$font-weight-semi: 700;
